<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式方法css()</title>
    <style>
        #div1{
            height: 200px;
            background-color: pink;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1" style="width: 200px"></div>
<div id="div2" style="width: 300px"></div>
<div id="div3" style="width: 400px"></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        // css()方法 设置/获取样式

        // 1. 获取样式: css方法设置参数为获取值的样式名
        $('#getBtn').click(function () {
            // 1.1 获取id为div1的样式
            $('#div1').css('height');
        });

        // 1.2 获取标签为div的所有元素的样式
        console.log($('div').css('height'));    // 只能匹配到第一个div的值

        // 2. 设置样式
        // 设置的样式为内联样式
        $('#setBtn').click(function () {
            // 2.1 给id为div1的元素设置样式
            $('#div1').css('width', '300px');
            // 设置多样式 使用对象的形式
            $('#div1').css({
                height:'300px',
                backgroundColor:'blue',
                border:'1px solid green'
            });

            // 2.2 给标签为div的所有元素设置样式
            $('div').css({
                width:300,
                height:300,
                backgroundColor:'blue',
            })
        })
    });
</script>
</html>